<script lang="ts" setup>
import { ref } from 'vue'
const props = withDefaults(
  defineProps<{
    img: string
    rules: string
  }>(),
  {
    img: '',
  },
)
const popup = ref<{
  open: () => void
  close: () => void
}>()
const open = () => {
  popup.value?.open()
}
const close = () => {
  popup.value?.close()
}
const change = (e: { show: boolean }) => {
  emit('changeVal', e.show)
}
const emit = defineEmits<{
  (event: 'changeVal', val: boolean): void
}>()
defineExpose({
  open,
  close,
})
</script>
<template>
  <uni-popup ref="popup" type="center" @change="change">
    <view class="_img">
      <image class="img" :src="props.img" mode="scaleToFill" />
      <scroll-view class="rulesBox" scroll-y>
        <view class="rules" v-html="props.rules"></view>
      </scroll-view>
    </view>
    <view class="iconfont icon_Frame-1" @tap="close()"></view>
  </uni-popup>
</template>
<style lang="scss" scoped>
._img {
  position: relative;
  width: 628rpx;
  height: 1122rpx;
  .img {
    position: absolute;
    left: 0rpx;
    top: 0rpx;
    width: 100%;
    height: 100%;
  }
  .rulesBox {
    position: absolute;
    bottom: 62rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 548rpx;
    height: 680rpx;
  }
  .rules {
    color: #666;
    font-family: 'PingFang SC';
    font-size: 28rpx;
  }
}

.iconfont {
  width: 100%;
  text-align: center;
  margin-top: 40rpx;
  font-size: 68rpx;
  color: #fff;
}
</style>
